<template>
    <div class="app-container">
        <div class="head-tabs">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="匠心故事" name="first"></el-tab-pane>
                <el-tab-pane label="探索风土" name="second"></el-tab-pane>
                <el-tab-pane label="上等食材" name="third"></el-tab-pane>
                <el-tab-pane label="精品酿造故事" name="fourth"></el-tab-pane>
                <el-tab-pane label="探索工艺" name="fifth"></el-tab-pane>
            </el-tabs>
        </div>
        <section v-loading="loading">
            <!-- 匠心故事 -->
            <el-form ref="form" :model="form" class="form content">
                <div class="content" v-if="activeName=='first'">
                    <el-form-item>
                        <el-radio-group v-model="form.head_type">
                            <el-radio :label="0">视频</el-radio>
                            <el-radio :label="1">图片</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div v-if="form.head_type==1" class="imgDiv">
                        <el-form-item label="图片（PC）" style="width:224px">
                            <div class="img" v-if="form.head_img_pc">
                                <el-image :src="form.head_img_pc"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="form.srcListh">
                                    <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                </el-image>
                                <i class="el-icon-delete" @click="form.head_img_pc = ''"></i>
                            </div>
                            <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUploadHead" :data="flag" v-else :show-file-list="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="图片（移动）" style="width:224px">
                            <div class="img" v-if="form.head_img">
                                <el-image :src="form.head_img"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="form.srcListh1">
                                    <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                </el-image>
                                <i class="el-icon-delete" @click="form.head_img = ''"></i>
                            </div>
                            <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUploadHead" v-else :show-file-list="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </div>
                    <el-form-item label="视频" v-else style="width:100%">
                        <el-upload class="avatar-uploader" :action="$Reg.uploadUrl" v-bind:on-progress="uploadVideoProcess" v-bind:before-upload="beforeUploadVideo" v-bind:show-file-list="false" :http-request="okUploadVideo" name="files">
                            <video v-if="form.video !='' && !videoFlag" v-bind:src="form.video" class="avatar video-avatar" controls="controls" style="width:100%;height:100%">
                                您的浏览器不支持视频播放
                            </video>
                            <i v-else-if="form.video =='' && !videoFlag" class="el-icon-plus avatar-uploader-icon"></i>
                            <el-progress v-if="videoFlag == true" type="circle" v-bind:percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="标题" style="width:224px" prop="title" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
                        <el-input v-model="form.title" placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <div style="display:flex">
                        <el-form-item label="背景图（PC）" prop="type0Img_pc" style="width:224px" :rules="[{ required: true, message: '请上传背景图（PC）', trigger: 'change' }]">
                            <div class="img" v-if="form.type0Img_pc">
                                <el-image :src="form.type0Img_pc"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="form.srcList">
                                    <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                </el-image>
                                <i class="el-icon-delete" @click="form.type0Img_pc = ''"></i>
                            </div>
                            <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUpload" :data="flag" v-else :show-file-list="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="背景图（移动）" prop="type0Img" style="width:224px" :rules="[{ required: true, message: '请上传背景图（移动）', trigger: 'change' }]">
                            <div class="img" v-if="form.type0Img">
                                <el-image :src="form.type0Img"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="form.srcList1">
                                    <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                </el-image>
                                <i class="el-icon-delete" @click="form.type0Img = ''"></i>
                            </div>
                            <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUpload" v-else :show-file-list="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </div>
                </div>
                <!-- 探索风土 -->
                <div class="content" v-else-if="activeName=='second'">
                    <el-form-item label="标题" style="width:224px" prop="title" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
                        <el-input v-model="form.title" placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <div style="display:flex">
                        <el-form-item label="背景图（PC）" prop="type1Img_pc" style="width:224px" :rules="[{ required: true, message: '请上传背景图（PC）', trigger: 'change' }]">
                            <div class="img" v-if="form.type1Img_pc">
                                <el-image :src="form.type1Img_pc"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="form.srcList">
                                    <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                </el-image>
                                <i class="el-icon-delete" @click="form.type1Img_pc = ''"></i>
                            </div>
                            <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUpload" :data="flag" v-else :show-file-list="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="背景图（移动）" prop="type1Img" style="width:224px" :rules="[{ required: true, message: '请上传背景图（移动）', trigger: 'change' }]">
                            <div class="img" v-if="form.type1Img">
                                <el-image :src="form.type1Img"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="form.srcList1">
                                    <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                </el-image>
                                <i class="el-icon-delete" @click="form.type1Img = ''"></i>
                            </div>
                            <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUpload" v-else :show-file-list="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </div>
                </div>
                <!-- 上等食材 -->
                <div class="content" v-else-if="activeName=='third'">
                    <el-form-item label="标题" style="width:224px" prop="title" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
                        <el-input v-model="form.title" placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <div style="display:flex">
                        <el-form-item label="背景图（PC）" prop="type2Img_pc" style="width:224px" :rules="[{ required: true, message: '请上传背景图（PC）', trigger: 'change' }]">
                            <div class="img" v-if="form.type2Img_pc">
                                <el-image :src="form.type2Img_pc"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="form.srcList">
                                    <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                </el-image>
                                <i class="el-icon-delete" @click="form.type2Img_pc = ''"></i>
                            </div>
                            <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUpload" :data="flag" v-else :show-file-list="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="背景图（移动）" prop="type2Img" style="width:224px" :rules="[{ required: true, message: '请上传背景图（移动）', trigger: 'change' }]">
                            <div class="img" v-if="form.type2Img">
                                <el-image :src="form.type2Img"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="form.srcList1">
                                    <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                </el-image>
                                <i class="el-icon-delete" @click="form.type2Img = ''"></i>
                            </div>
                            <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUpload" v-else :show-file-list="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </div>
                </div>
                <!-- 精品酿造故事 -->
                <div class="content" v-else-if="activeName=='fourth'">
                    <el-form-item label="标题" style="width:224px" prop="title" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
                        <el-input v-model="form.title" placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <div style="display:flex">
                        <el-form-item label="背景图（PC）" prop="type3Img_pc" style="width:224px" :rules="[{ required: true, message: '请上传背景图（PC）', trigger: 'change' }]">
                            <div class="img" v-if="form.type3Img_pc">
                                <el-image :src="form.type3Img_pc"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="form.srcList">
                                    <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                </el-image>
                                <i class="el-icon-delete" @click="form.type3Img_pc = ''"></i>
                            </div>
                            <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUpload" :data="flag" v-else :show-file-list="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="背景图（移动）" prop="type3Img" style="width:224px" :rules="[{ required: true, message: '请上传背景图（移动）', trigger: 'change' }]">
                            <div class="img" v-if="form.type3Img">
                                <el-image :src="form.type3Img"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="form.srcList1">
                                    <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                </el-image>
                                <i class="el-icon-delete" @click="form.type3Img = ''"></i>
                            </div>
                            <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUpload" v-else :show-file-list="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </div>
                </div>
                <!-- 探索工艺 -->
                <div class="content" v-else>
                    <el-form-item label="标题" style="width:224px" prop="title" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
                        <el-input v-model="form.title" placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <div style="display:flex">
                        <el-form-item label="背景图（PC）" prop="type4Img_pc" style="width:224px" :rules="[{ required: true, message: '请上传背景图（PC）', trigger: 'change' }]">
                            <div class="img" v-if="form.type4Img_pc">
                                <el-image :src="form.type4Img_pc"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="form.srcList">
                                    <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                </el-image>
                                <i class="el-icon-delete" @click="form.type4Img_pc = ''"></i>
                            </div>
                            <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUpload" :data="flag" v-else :show-file-list="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="背景图（移动）" prop="type4Img" style="width:224px" :rules="[{ required: true, message: '请上传背景图（移动）', trigger: 'change' }]">
                            <div class="img" v-if="form.type4Img">
                                <el-image :src="form.type4Img"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="form.srcList1">
                                    <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                </el-image>
                                <i class="el-icon-delete" @click="form.type4Img = ''"></i>
                            </div>
                            <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUpload" v-else :show-file-list="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </div>
                </div>
                <el-form-item label="富文本" style="width:100%" prop="content" :rules="[{ required: true, message: '请输入富文本', trigger: 'blur' }]">
                    <div id="edit1" ref="edit1"></div>
                </el-form-item>
                <div class="sure">
                    <el-button type="primary" style="width:143px" @click="save">确定</el-button>
                </div>
            </el-form>
        </section>
    </div>
</template>

<script>
import E from 'wangeditor'
export default {
    data() {
        return {
            loading: false,
            flag: {
                a: 0
            },
            activeName: 'first',
            form: {
                //匠心故事
                type0Img: '',
                type0Img_pc: '',
                video: '',
                head_img: '',
                head_img_pc: '',
                title: '',
                //探索风土
                type1Img: '',
                type1Img_pc: '',
                //上等食材
                type2Img: '',
                type2Img_pc: '',
                //精品酿造故事
                type3Img: '',
                type3Img_pc: '',
                //探索工艺
                type4Img: '',
                type4Img_pc: '',
                img: '',
                img_pc: '',
                content: '',
                type: 0,
                head_type: 0
            },
            videoFlag: false,
            //是否显示进度条
            videoUploadPercent: "",
            //进度条的进度，
            isShowUploadVideo: false,
            //显示上传按钮
            editor1: '',
            list: []
        }
    },
    created() {
    },
    mounted() {
        this.getIngenuity()
    },
    methods: {
        handleClick(tab, event) {
            let list = { first: 0, second: 1, third: 2, fourth: 3, fifth: 4 }
            let name = tab.name
            this.editor1.txt.html(this.list[list[name]].content)
            this.form.srcList = [this.form['type' + list[name] + 'Img_pc']]
            this.form.srcList1 = [this.form['type' + list[name] + 'Img']]
            this.form.srcListh = [this.form.head_img_pc]
            this.form.srcListh1 = [this.form.head_img]
            this.form.title = this.list[list[name]].title
        },
        async getIngenuity() {
            let res = await this.$Http.getIngenuity()
            if (res.status == 1) {
                this.list = res.data
                for (let i in res.data) {
                    this.form['type' + i + 'Img_pc'] = res.data[i].img_pc
                    this.form['type' + i + 'Img'] = res.data[i].img
                }
                this.form.srcList = [res.data[0].img_pc]
                this.form.srcList1 = [res.data[0].img]
                this.form.srcListh = [res.data[0].head_img_pc]
                this.form.srcListh1 = [res.data[0].head_img]
                this.form.content = res.data[0].content
                this.form.title = res.data[0].title
                this.form.head_img = res.data[0].head_img
                this.form.head_img_pc = res.data[0].head_img_pc
                this.form.video = res.data[0].video
                this.form.head_type = res.data[0].head_type
                this.getEdit()
            } else {
                this.$message.error(res.msg)
            }
        },
        getEdit() {
            this.editor1 = new E(this.$refs.edit1)
            // editor1.txt.clear()
            // 或者 const editor = new E( document.getElementById('div1') )
            this.editor1.config.onchange = (html) => {
                this.form.content = html
            }
            // editor.config.uploadImgServer = this.$Reg.uploadUrl
            this.editor1.config.customUploadImg = (resultFiles, insertImgFn) => {
                let formData = new window.FormData();
                formData.append("files", resultFiles[0]);
                this.$Http.upload(formData).then((res) => {
                    if (res.status == 1) {
                        this.$message({
                            message: "上传成功",
                            type: "success",
                        });
                        insertImgFn(res.data)
                    } else {
                        this.$message(res.msg);
                    }
                });
            }
            this.editor1.config.customUploadVideo = (resultFiles, insertVideoFn) => {
                let formData = new window.FormData();
                formData.append("files", resultFiles[0]);
                this.$Http.upload(formData).then((res) => {
                    if (res.status == 1) {
                        this.$message({
                            message: "上传成功",
                            type: "success",
                        });
                        insertVideoFn(res.data)
                    } else {
                        this.$message(res.msg);
                    }
                });
            }
            this.editor1.create()
            this.editor1.txt.html(this.form.content);
        },
        save() {
            if (this.activeName == 'first') {
                this.form.img_pc = this.form.type0Img_pc
                this.form.img = this.form.type0Img
                this.form.type = 0
            } else if (this.activeName == 'second') {
                this.form.img_pc = this.form.type1Img_pc
                this.form.img = this.form.type1Img
                this.form.type = 1
            } else if (this.activeName == 'third') {
                this.form.img_pc = this.form.type2Img_pc
                this.form.img = this.form.type2Img
                this.form.type = 2
            } else if (this.activeName == 'fourth') {
                this.form.img_pc = this.form.type3Img_pc
                this.form.img = this.form.type3Img
                this.form.type = 3
            } else {
                this.form.img_pc = this.form.type4Img_pc
                this.form.img = this.form.type4Img
                this.form.type = 4
            }
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    let res = await this.$Http.setIngenuity(this.form)
                    if (res.status == 1) {
                        this.$message.success('保存成功')

                        let list = { first: 0, second: 1, third: 2, fourth: 3, fifth: 4 }
                        this.list[list[this.activeName]].content = this.form.content
                        this.list[list[this.activeName]].title = this.form.title
                    }
                } else {
                    return false;
                }
            });
        },
        //上传头像文件等
        okUpload(file) {
            let formData = new window.FormData();
            formData.append("files", file.file);
            this.$Http.upload(formData).then((res) => {
                if (res.status == 1) {
                    this.$message({
                        message: "上传成功",
                        type: "success",
                    });
                    switch (this.activeName) {
                        case 'first':
                            if (file.data) {
                                this.form.type0Img_pc = res.data
                            } else {
                                this.form.type0Img = res.data
                            }
                            break;
                        case 'second':
                            if (file.data) {
                                this.form.type1Img_pc = res.data
                            } else {
                                this.form.type1Img = res.data
                            }
                            break;
                        case 'third':
                            if (file.data) {
                                this.form.type2Img_pc = res.data
                            } else {
                                this.form.type2Img = res.data
                            }
                            break;
                        case 'fourth':
                            if (file.data) {
                                this.form.type3Img_pc = res.data
                            } else {
                                this.form.type3Img = res.data
                            }
                            break;
                        case 'fifth':
                            if (file.data) {
                                this.form.type4Img_pc = res.data
                            } else {
                                this.form.type4Img = res.data
                            }
                            break;
                    }

                } else {
                    this.$message(res.msg);
                }
            });
        },
        okUploadHead(file) {
            let formData = new window.FormData();
            formData.append("files", file.file);
            this.$Http.upload(formData).then((res) => {
                if (res.status == 1) {
                    this.$message({
                        message: "上传成功",
                        type: "success",
                    });
                    if (file.data) {
                        this.form.head_img_pc = res.data
                    } else {
                        this.form.head_img = res.data
                    }
                } else {
                    this.$message(res.msg);
                }
            });
        },
        async okUploadVideo(file) {
            this.isShowUploadVideo = true;
            this.videoFlag = false;
            this.videoUploadPercent = 0;
            let formData = new window.FormData();
            formData.append("files", file.file);
            this.loading = true
            let res = await this.$Http.upload(formData)
            if (res.status == 1) {
                this.$message({
                    message: "上传成功",
                    type: "success",
                });

                this.form.video = res.data

            } else {
                this.$message(res.msg);
            }
            this.loading = false
        },
        //上传前回调
        beforeUploadVideo(file) {
            var fileSize = file.size / 1024 / 1024 < 50;
            if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
                this.$message.warning("请上传正确的视频格式");
                return false;
            }
            if (!fileSize) {
                this.$message.warning("视频大小不能超过50MB");
                return false;
            }
            this.isShowUploadVideo = false;
        },
        //进度条
        uploadVideoProcess(event, file, fileList) {
            this.videoFlag = true;
            this.videoUploadPercent = file.percentage.toFixed(0) * 1;
        },
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    ::v-deep .w-e-toolbar {
        z-index: 1000 !important;
    }
    ::v-deep .w-e-text-container {
        z-index: 1 !important;
    }
    .head-tabs {
        height: 40px;
        width: 100%;
        padding-left: 30px;

        ::v-deep {
            .el-tabs__nav-wrap::after {
                background-color: transparent;
            }
            .el-tabs__active-bar {
                background-color: rgb(64, 158, 255);
            }
            .el-tabs__item {
                height: 40px;
                line-height: 30px;
                font-size: 16px;
                font-weight: 400;
                text-align: left;
                letter-spacing: 1px;
                color: #364164;
            }
            .is-active {
                font-weight: 600 !important;
                color: rgb(64, 158, 255);
            }
        }
    }
    .img {
        width: 146px;
        height: 146px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all 3s;
        &:hover {
            i {
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba($color: #000000, $alpha: 0.3);
                color: rgba($color: #fff, $alpha: 1);
            }
        }
        i {
            position: absolute;
            color: #fff;
            font-size: 26px;
            display: none;
        }
    }
    ::v-deep .el-form-item__label {
        float: initial;
    }
    ::v-deep .el-input.is-disabled .el-input__inner {
        color: #606266;
        background-color: transparent;
    }
    section {
        background: #f7fafc;
        padding: 30px;
        .content {
            width: 100%;
            height: 100%;
            background: #fff;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            padding: 20px;
            .imgDiv {
                display: flex;
            }
            .form {
                // display: flex;
                flex-wrap: wrap;
            }
        }
    }
}
</style>